<template>
	<!-- 模板：结构 -->
	<view class="search-input">
		<view class="box">
			<!-- 输入框获取焦点就跳转搜索页 @focus="jumpToSearch" -->
			<input @focus="jumpToSearch" class="inp" type="text" placeholder="关键字搜索">
		</view>
	</view>
</template>

<script setup>
	// 脚本：可以做一些用户与界面交互的事情
	const jumpToSearch = ()=> {
		uni.navigateTo({
			url:"/pages/search/search"
		})
	}

</script>

<style lang="scss">
	// 样式: 书写外观的
.search-input {
	padding: 20rpx 30rpx;
	.box {
		.inp {
			display: block;
			width: 100%;
			box-sizing: border-box;
			padding: 0 40rpx;
			height: 90rpx;
			border: 1px solid #ccc;
			border-radius: 10rpx;
		}
	}
}
</style>